<template>
  <div class="register-animation-container">
    <svg class="register-animation" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
      <!-- 背景形状 -->
      <rect x="100" y="50" width="200" height="200" rx="20" class="bg-shape" />
      
      <!-- 用户注册图形 -->
      <g class="user-profile">
        <circle cx="200" cy="120" r="30" class="profile-circle" />
        <path d="M170,160 C170,140 230,140 230,160 L230,190 L170,190 Z" class="profile-body" />
      </g>
      
      <!-- 表单图形 -->
      <g class="form-graphic">
        <rect x="160" y="200" width="80" height="10" rx="5" class="form-line" />
        <rect x="160" y="220" width="80" height="10" rx="5" class="form-line" />
        <rect x="160" y="240" width="80" height="10" rx="5" class="form-line" />
      </g>
      
      <!-- 动态元素：数据点 -->
      <g class="data-points">
        <circle cx="120" cy="80" r="5" class="data-point point-1" />
        <circle cx="280" cy="80" r="5" class="data-point point-2" />
        <circle cx="120" cy="220" r="5" class="data-point point-3" />
        <circle cx="280" cy="220" r="5" class="data-point point-4" />
      </g>
      
      <!-- 动态元素：连接线 -->
      <g class="connection-lines">
        <line x1="120" y1="80" x2="200" y2="120" class="connect-line line-1" />
        <line x1="280" y1="80" x2="200" y2="120" class="connect-line line-2" />
        <line x1="120" y1="220" x2="160" y2="220" class="connect-line line-3" />
        <line x1="280" y1="220" x2="240" y2="220" class="connect-line line-4" />
      </g>
      
      <!-- 动态元素：图标 -->
      <g class="icons">
        <g class="icon icon-1">
          <rect x="100" y="100" width="15" height="15" rx="2" />
          <line x1="103" y1="107.5" x2="112" y2="107.5" />
          <line x1="107.5" y1="103" x2="107.5" y2="112" />
        </g>
        
        <g class="icon icon-2">
          <rect x="285" y="100" width="15" height="15" rx="2" />
          <polyline points="288,107.5 292,111.5 297,104.5" />
        </g>
        
        <g class="icon icon-3">
          <rect x="100" y="180" width="15" height="15" rx="2" />
          <circle cx="107.5" cy="187.5" r="4" />
        </g>
        
        <g class="icon icon-4">
          <rect x="285" y="180" width="15" height="15" rx="2" />
          <line x1="290" y1="185" x2="295" y2="190" />
          <line x1="295" y1="185" x2="290" y2="190" />
        </g>
      </g>
      
      <!-- 动态元素：波浪 -->
      <path d="M100,260 C130,240 170,280 200,260 C230,240 270,280 300,260" class="wave" />
    </svg>
  </div>
</template>

<script>
export default {
  name: 'RegisterAnimation'
}
</script>

<style scoped>
.register-animation-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.register-animation {
  width: 100%;
  height: 100%;
  max-width: 450px;
}

.bg-shape {
  fill: rgba(255, 255, 255, 0.15);
  transform-origin: center;
  animation: rotate 30s infinite linear;
}

.profile-circle {
  fill: #a6c8ff;
}

.profile-body {
  fill: #80b0ff;
}

.form-line {
  fill: #b3d1ff;
}

.data-point {
  fill: #d6e9ff;
}

.point-1 {
  animation: blink 3s infinite ease-in-out;
}

.point-2 {
  animation: blink 3s infinite ease-in-out 0.5s;
}

.point-3 {
  animation: blink 3s infinite ease-in-out 1s;
}

.point-4 {
  animation: blink 3s infinite ease-in-out 1.5s;
}

.connect-line {
  stroke: #b3d1ff;
  stroke-width: 1.5;
  stroke-dasharray: 5, 5;
  animation: dash 20s infinite linear;
}

.line-1, .line-3 {
  animation: pulse-line 4s infinite ease-in-out;
}

.line-2, .line-4 {
  animation: pulse-line 4s infinite ease-in-out 2s;
}

.icon rect {
  fill: white;
  stroke: #80b0ff;
  stroke-width: 1.5;
}

.icon line, .icon polyline, .icon circle {
  stroke: #80b0ff;
  stroke-width: 2;
  fill: none;
}

.icon {
  animation: float 5s infinite ease-in-out;
}

.icon-1 {
  animation-delay: 0s;
}

.icon-2 {
  animation-delay: 1.25s;
}

.icon-3 {
  animation-delay: 2.5s;
}

.icon-4 {
  animation-delay: 3.75s;
}

.wave {
  fill: none;
  stroke: #a6c8ff;
  stroke-width: 2.5;
  animation: wave 5s infinite ease-in-out;
}

@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes blink {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

@keyframes dash {
  to { stroke-dashoffset: 100; }
}

@keyframes pulse-line {
  0%, 100% { stroke-width: 1.5; opacity: 0.6; }
  50% { stroke-width: 2.5; opacity: 1; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes wave {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
</style> 